<template>
	<view>
		<view class="ReturnRefund-demo">
		  <van-row>
			<van-col span="9"><image :src="list.picUrl" mode="" style="width: 250rpx;height: 250rpx;"></image></van-col>
			<van-col span="14" style="text-align: left">
			  <p>{{list.productName}}</p>
			  <P style="color: #cccccc;font-size: 0.6rem;padding-top: 0.5rem">{{list.labelName}},{{list.labelUnit}}</P>
			</van-col>
		  </van-row>
		  <view align="left">
			<p style="padding: 0.3rem 0 0.3rem 0.95rem;font-size: 0.8rem;">退款金额：<span style="color: red">￥{{list.labelPrice*list.productCnt}}</span></p>
			<p style="padding:  0.3rem 0 0.3rem 0.95rem;font-size: 0.6rem;color: #cccccc">不可修改</p>
		  </view>
		  <van-cell-group>
			<van-field v-model="orderRetreat.orderRetreatReason" label="退货原因" placeholder="必填"/>
		  </van-cell-group>
		  <van-cell title="上传凭证" align="left"/>
		  <view align="left" style="padding: 0.5rem">
			  <view style="float: left;" v-for="item in img">
			  	<image style="width: 5rem;height: 5rem;margin-left: 10rpx;" :src="item" mode=""></image>
			  </view>
			  <van-button @click="shangchuan">上传</van-button>
			  <van-button v-if="img.length>0" @click="qingchu">清除图片</van-button>
			 <!-- <van-uploader
				  v-model="fileList"
				  :max-count="4"
				  :after-read="onRead"
				  accept="image/*"
				  :multiple="true"
				></van-uploader> -->
		  </view>
		</view>
		<view style="text-align: center;">
			<van-button round type="danger" @click="refund()" >提交退货</van-button>
		</view>
	</view>
</template>

<script>
	  import local from '@/utils/localStorage.js';
	  import { addOrderRetreat,uploadImages } from "../../api/commodity/order_retreat.js";
	  import { Notify } from 'vant';
	  import { Toast } from 'vant';
	export default {
		 components: {
			 
		 },
		data() {
			return {
			  img:[],
			  //订单列表申请退货的对象
			  list:{},
			  //退货原因的理由
			  orderRetreat:{
				orderId:'',
				supplierId:'',
				orderRetreatReason:'',
				orderRetreatPicture:'',
				fileList:[],
				urlList:[],
				img0:undefined,
				img1:undefined,
				img2:undefined,
				img3:undefined,
			  },
			  //图片文件
			  fileList:[],
			  urlList:[],
								 
			}
		},
		//页面渲染前加载
		created(){
			this.list = JSON.parse(sessionStorage.getItem('list'));
			console.log(JSON.stringify(this.list));
		},
		methods: {
			  //上传多图片
			//    onRead (e) {
			// 	 //注意，我们这里没有使用form表单提交文件，所以需要用new FormData来进行提交
			// 	 let fd = new FormData()
			// 	 if (e instanceof Array && e.length) { // 判断是否是多图上传 多图则循环添加进去
			// 	   e.forEach(item => {
			// 		 fd.append("files", item.file)//第一个参数字符串可以填任意命名，第二个根据对象属性来找到file
			// 	   })
			// 	 } else {
			// 	   fd.append("files", e.file)
			// 	 }
			// 	 uploadImages(fd).then((res)=>{
			// 	   if(res.data.code==200){
			// 		 this.urlList.push(res.data);
			// 	   }else {
		 
			// 	   }
			// 	   console.log(res);
			// 	 })
			//    },
			
				//上传图片
				shangchuan(){
				  uni.chooseImage({ // 从本地相册选择图片或使用相机拍照。
					count: 4, //默认选择1张图片
					sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
					success: (res) => {
						console.log(res.tempFilePaths); //成功则返回图片的本地文件路径列表 tempFilePaths
						this.img = res.tempFilePaths;
						let imgs = this.img.map((value, index) => {
							return {
									name: "files",
									uri: value
								}
						});
						uni.uploadFile({ //将本地资源上传到开发者服务器
							url:'http://localhost:8080/api/local/fabulous/upload', //接口地址
							files: imgs,
							header: {
								'contentType': "application/json;charset=UTF-8",
								'Accept': "application/json;charset=UTF-8",
								'token': local.get("token"),
							},//token添加
							success: (uploadFileRes) => {
								if(uploadFileRes.statusCode==200){
									var data = JSON.parse(uploadFileRes.data)
									this.orderRetreat.img0 = data.img0;
									this.orderRetreat.img1 = data.img1;
									this.orderRetreat.img2 = data.img2;
									this.orderRetreat.img3 = data.img3;
								}else{
									 Toast("上传失败");
									 this.img = [];
								}
							}
						});
						
					}
				  });
				},
				//清除图片
				qingchu(){
					this.img = [];
					this.orderRetreat.img0 = undefined;
					this.orderRetreat.img1 = undefined;
					this.orderRetreat.img2 = undefined;
					this.orderRetreat.img3 = undefined;
				},
			   //提交退款信息
			   refund(){
				 this.orderRetreat.orderId = this.list.orderId;
				 this.orderRetreat.supplierId = this.list.supplierId;
				 if(this.orderRetreat.orderRetreatReason==''){
					 Toast("请填写退货原因");
				 }else {
				   addOrderRetreat(this.orderRetreat).then((res)=>{
					 if(res.data.code==200){
						uni.navigateTo({
							url: '../mine_applyafter/mine_applyafter'
						});
					   Toast.success("申请成功");
					 }else {
					   uni.navigateTo({
						 url: '../mine_applyafter/mine_applyafter'
					   });
					   Toast.fail("申请失败");
					 }
				   })
				 }
			   },
		
		},
		//同步数据
		watch:{
			
		},
	}
</script>

<style>
	  .demo-nav{
	    position: relative;
	    display: flex;
	    -webkit-box-align: center;
	    align-items: center;
	    -webkit-box-pack: center;
	    justify-content: center;
	    height: 56px;
	    background-color: #fff;
	    font-size: 1.1rem;
	  }
	  .demo-nav__back{
	    position: absolute;
	    top: 16px;
	    left: 16px;
	    width: 24px;
	    height: 24px;
	    cursor: pointer;
	  }
	  .ReturnRefund-demo{
	    padding: 0.5rem;
	  }
</style>
